<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="IndexPage">
    <el-container class="height-percent-100">
      <el-header>
        <el-row>
          <el-col :span="18" :offset="3">
            <el-menu
              :default-active="$route.path"
              class="el-menu-demo"
              mode="horizontal"
              router
            >
              <template v-for="(item, index) in menuList">
                <el-submenu
                  v-if="item.childList.length"
                  :index="item.url"
                  :key="index"
                >
                  <template slot="title">
                    {{ item.name }}
                  </template>
                  <el-menu-item-group>
                    <el-menu-item
                      v-for="(_item, _index) in item.childList"
                      :key="_index"
                      :index="_item.url"
                    >
                      <template slot="title">
                        {{ _item.name }}
                      </template>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-menu-item v-else :index="item.url" :key="index">
                  {{ item.name }}
                </el-menu-item>
              </template>
            </el-menu>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="scrollbar-y">
        <el-scrollbar>
          <el-row>
            <el-col :span="18" :offset="3">
              <router-view :key="$route.fullPath"></router-view>
            </el-col>
          </el-row>
        </el-scrollbar>
      </el-main>
      <el-footer>
        <div class="map" v-if="$route.fullPath === '/about'">
          <baidu-map id="allmap" :center="center" :zoom="zoom" @ready="handler">
            <bm-marker
              :position="{ lng: 116.404, lat: 39.915 }"
              :dragging="false"
              animation="BMAP_ANIMATION_BOUNCE"
              @click="infoWindowOpen"
            >
              <bm-label
                content="北京天安门"
                :labelStyle="{ color: 'red', fontSize: '12px' }"
                :offset="{ width: -20, height: 30 }"
              />
              <!-- <bm-info-window
                :show="show"
                @close="infoWindowClose"
                @open="infoWindowOpen"
                >北京天安门</bm-info-window
              > -->
            </bm-marker>
          </baidu-map>
        </div>
        <el-row>
          <el-col :span="18" :offset="3">footer </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "IndexPage",
  components: {},
  data() {
    return {
      center: { lng: 0, lat: 0 },
      zoom: 3,
      show: true,
    };
  },
  computed: {
    breadcrumb() {
      return this.$store.state.breadcrumb;
    },
    menuList() {
      const menu = [
        {
          url: "/index",
          icon: "dashboard",
          name: "首页",
          childList: [],
        },
        {
          url: "/screen",
          icon: "dashboard",
          name: "可视化大屏",
          childList: [],
        },
        {
          url: "/about",
          icon: "dashboard",
          name: "关于我",
          childList: [],
        },
        {
          url: "/pdf",
          icon: "dashboard",
          name: "PDF",
          childList: [
            {
              url: "/pdf/vuepdf",
              icon: "tree-table",
              name: "vuepdf",
            },
            {
              url: "/pdf/html2canvas",
              icon: "peoples",
              name: "html2canvas",
            },
          ],
        },
        {
          url: "/player",
          icon: "dashboard",
          name: "视频播放器",
          // childList: [],
          childList: [
            {
              url: "/player/xgplayer",
              icon: "tree-table",
              name: "西瓜视频",
            },
            {
              url: "/player/vue-video-player",
              icon: "peoples",
              name: "VueVideoPlayer",
            },
            {
              url: "/player/dplayer",
              icon: "peoples",
              name: "DPlayer",
            },
          ],
        },
        {
          url: "/admin",
          icon: "dashboard",
          name: "后台管理",
          childList: [],
        },
      ];
      return menu;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handler({ BMap, map }) {
      console.log(BMap, map);
      // this.center.lng = 120.395191;
      // this.center.lat = 31.55514;
      this.center.lng = 116.404;
      this.center.lat = 39.915;
      this.zoom = 15;
    },
    infoWindowClose() {
      this.show = false;
    },
    infoWindowOpen() {
      this.show = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.IndexPage {
  .el-header {
    height: 80px;
    // background: #ffffff;
    position: relative;
    // border-bottom: 1px solid #ccc;
    // background-color: #fff;
    // -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 6%);
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 6%);
    /*吸顶效果*/
    position: sticky;
    position: -webkit-sticky; // !*兼容 -webkit 内核的浏览器*!
    top: 0px; // !*必须设一个值，否则不生效*!
    z-index: 999;
    .el-menu.el-menu--horizontal {
      border: none;
    }
  }
  header {
    padding: 0;
    background-color: #fff;
  }
  .el-main {
    // padding: 0px 20px 20px 20px;
  }
  .el-footer {
    height: 120px !important;
    background-color: #000;
    color: #ffffffb3;
    padding: 0px;
    // 添加属性，取消原有高度
    // height: auto !important;
    .map {
      background: #fff;
      padding: 5px;
      #allmap {
        width: 100%;
        height: 400px;
        // border: 1px solid red;
      }
    }
  }
}
</style>
